<template>
  <div class="search-box">
    <!-- 
      定位
     -->
    <div class="location">
      <!-- 回显城市 todo -->
      <div class="city" @click="cityClick">{{ curCity.cityName }}</div>
      <!-- 我的位置 -->
      <div class="position" @click="positionClick">
        <span class="text">我的位置</span>
        <img src="@/assets/img/home/icon_location.png" alt="">
      </div>
    </div>

    <!-- 日期 -->
    <div class="selectDate" @click="calendarShow = true">
      <div class="start">
        <span>入住</span>
        <span>{{ startDate }}</span>
      </div>
      <div class="stay">
        <span>共{{ stayDay }}晚</span>
      </div>
      <div class="end">
        <span>离店</span>
        <span>{{ endDate }}</span>
      </div>
    </div>
    <van-calendar v-model:show="calendarShow" type="range" @confirm="onConfirm" />


    <!-- 价格 人数 关键字等标签 -->
    <div class="tagBox">
      <div class="top">
        <span class="price">价格不限</span>
        <span class="personNum">人数不限</span>
      </div>
      <div class="bottom">
        <span>关键字/位置/民宿名</span>
      </div>
    </div>

    <!-- 热门推荐 -->
    <div class="hotSuggests">
      <div class="text" v-for="(item, index) in hotSuggestsArr" :key="index" :style="{ backgroundColor: item.tagText.background.color }
        ">{{ item.tagText.text }}</div>
    </div>

    <!-- 搜索按钮 -->
    <div class="search-btn" @click="searchBtnClick">开始搜索</div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useCityStore } from '@/stores/city.js'
import { useHomeStore } from '@/stores/home.js'
import { storeToRefs } from 'pinia'
import { formateMonthAndDay, getDiffDays } from '@/utils/formateDate.js'

const router = useRouter()


// 1.定位相关
function cityClick() {
  router.push('/city')
}

function positionClick() {
  navigator.geolocation.getCurrentPosition((res) => {
    console.log('success:', res);
  }, (err) => {
    console.log('err:', err);
  })
}

// 回显地址
// 获取仓库实例
const cityStore = useCityStore()
const { curCity } = storeToRefs(cityStore)



// 2.日期
const nowDate = new Date()
const newDate = new Date().setDate(nowDate.getDate() + 1)
const startDate = ref(formateMonthAndDay(nowDate))
const endDate = ref(formateMonthAndDay(newDate))
const stayDay = ref(1)

let calendarShow = ref(false)

const onConfirm = (values) => {
  const [start, end] = values;
  calendarShow.value = false;
  // date.value = `${formatDate(start)} - ${formatDate(end)}`;
  startDate.value = formateMonthAndDay(start)
  endDate.value = formateMonthAndDay(end)
  // 几天
  stayDay.value = getDiffDays(start, end)
};



// 3.推荐
// 获取仓库实例
const homeStore = useHomeStore()
// 请求
homeStore.fetchHotSuggests()
// 解构出
const { hotSuggestsArr } = storeToRefs(homeStore)


// 4.搜索按钮
function searchBtnClick() {
  router.push({
    path: '/search',
    query: {
      startDate: startDate.value,
      endDate: endDate.value,
      curCity: curCity.value.cityName
    }
  })
}


</script>


<style scoped lang="less">
.location {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 20px;

  .city {
    flex: 1;
  }

  .position {
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 18px;
      height: 18px;
      margin-left: 10px;
    }
  }
}

.selectDate {
  display: flex;
  justify-content: space-between;
  height: 44px;
  align-items: center;
  padding: 0 20px;

  .start,
  .end {
    display: flex;
    flex-direction: column;

    span:nth-child(1) {
      color: #999;
    }

    span:nth-child(2) {
      font-size: 16px;
    }
  }

}

// 标签区
.tagBox {
  padding: 0 20px;
  color: #999;

  .top,
  .bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 44px;

    .personNum {
      margin-right: 14px;
    }
  }
}

// 推荐
.hotSuggests {
  display: flex;
  flex-wrap: wrap;

  .text {
    padding: 10px;
    margin: 10px;
  }
}


// 搜索按钮
.search-btn {
  width: 90%;
  margin: 0 auto;
  height: 44px;
  line-height: 44px;
  text-align: center;
  background-image: linear-gradient(to right, #f9a211, #fbbf35);
  border-radius: 22px;
  color: #fff;
}
</style>
